ng-form是什麼？

angular針對form這個標籤包裝起來，自訂ng-form這個指令，增加對應的屬性與方法，
用來進一步處理表單上可能會遇到的問題。

form和ng-form有什麼不同？

ng-form允許有巢狀表單(nest forms)，就是在表單內再增加一個或多個form，而form則無法達到此需求。

改寫範例：
http://jsbin.com/ULumolE/2/
ng-form怎麼用？

從基本的範例中，說明如何使用ng-form指令。

範例說明：

1. 建立一個form表單，裡面有兩個輸入欄位，分別為姓名和年齡。
2. 按下新增的按鈕，會在此form表單內再增加兩個輸入欄位。
3. 按下儲存的按鈕，可以獲得輸入的欄位內容。

執行過程：
(1) 建立基本的form表單。
裡面包含兩個輸入欄位，以及新增和儲存兩個按鈕。

<form name="test_form" ng-submit="submit()">
        姓名：<input type="text" name="input_name" required>
        年齡：<input type="text" name="input_age" required>
        <br>
      <input type="submit" value="新增" ng-click="addKey()"/>  
      <input type="submit" value="儲存" />
</form>

(2) 加入ng-form。
給予表單名稱並使用ng-repeat將資料取出後，讓輸入欄位綁定ng-model。

<ng-form ng-repeat="key in keys" name="keyForm">
        姓名：<input type="text" name="input_name" ng-model="key.name" required>
        年齡：<input type="text" name="input_age" ng-model="key.age" required>
        <br>
</ng-form>

(3) 新增輸入欄位，並綁定欄位內容。
按下新增的按鈕，將欄位內的資料存放到陣列中。

html:

<input type="submit" value="新增" ng-click="addKey()"/>

js:

$scope.addKey = function () {
    $scope.keys.push({ name: '',age:null});
    };

(4) 透過資料綁定，按下儲存按鈕，獲得輸入的欄位內容

html:

<input type="submit" value="儲存" />

js:

$scope.submit = function () {
        console.log($scope.keys);
    };

完整範例：
http://jsbin.com/ULumolE/2/edit

參考資料：
http://zouyesheng.com/angular.html

參考範例來源：
http://stackoverflow.com/questions/14583252/how-to-get-data-from-ngform-in-angularjs

進階範例：
angularjs Form進階
http://www.angularjs.cn/A08r

The ngForm directive of AngularJS
http://blog.brunoscopelliti.com/the-ngform-directive-of-angularjs

http://jsfiddle.net/IgorMinar/FNDjS/1/

---------------入門AngularJS筆記---------------

Day30- 入門AngularJS筆記-directive
http://ithelp.ithome.com.tw/question/10140689

Day29- 入門AngularJS筆記-filter
http://ithelp.ithome.com.tw/question/10140497

Day28- 入門AngularJS筆記-AngularJS指令(24): ng-mouseover
http://ithelp.ithome.com.tw/question/10140351

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196